<template>
  

  <div style="background-color:rgb(228,228,228) ; width:100%;height:618px"> 

<div style="padding-top:80px;padding-left:20px">
    
    <el-avatar :size="60"  >头像</el-avatar> 
   
    
</div>

<div style="padding-left:95px;margin-top:-58px">


    <b style="font-size:16px">{{ userInfo.nickname }}</b>

    </div>

    <div style="padding-left:95px;margin-top:5px">
        <i class="el-icon-phone"></i> &nbsp;







    <b style="font-size:14px">{{ userInfo.phone }}</b>
    </div>

    <div style="margin-left:255px; margin-top:5px">
       <el-button type="info"
      @click="ToLogin"
      v-if="phone==null?true:false"
       round class="button" size="medium"
        >请登录</el-button>
    </div>

<div style="padding-top:10px;">
        <p style="margin-left:25px;background-color:rgb(228,228,228);padding-top:12px;padding-bottom:12px;padding-left:30px;font-size:15px ">
          <span>{{ user.credit }}</span> 
          <span style="margin-left:70px">{{ user.levels }}</span>
           <span style="margin-left:90px">0.00</span>
        </p>
        <p style="margin-top:-25px;margin-left:55px">
          <span>积分</span>
           <span style="margin-left:60px">会员等级</span>
            <span style="margin-left:60px">余额（元）</span>
        </p>
</div>


<el-row>
      <el-col style="background-color:white;border-radius:10px;width:335px;height:115px;margin-top:30px;margin-left:20px">
            <div style="margin-left:15px;margin-top:2px">
                <span><b style="font-size:16px;">我的订单</b></span><span style="font-size:13px;margin-left:150px"> <el-button type="text" @click="findMyOrders">查看全部订单 > </el-button> </span>
                
                <div style="margin-top:10px;margin-left:30px">
                  <span style="font-size:30px"><i class="el-icon-tickets" ></i></span>
                  <span style="font-size:30px;margin-left:68px"><i class="el-icon-box" ></i></span>
                  <span style="font-size:30px;margin-left:75px"><i class="el-icon-edit" ></i></span>

                </div>

                <div style="margin-top:-10px"> <span style="margin-left:20px"><el-button @click="findMyOrders"    type="text">我的订单</el-button></span> 
                                               <span style="margin-left:42px"><el-button @click="receiveMyGoods" type="text">待收货</el-button></span>
                                               <span style="margin-left:60px"><el-button @click="editComment" type="text">待评价</el-button></span></div>

               
            </div>
      </el-col>
</el-row>

<P></P>
<el-row>
      <el-col style="background-color:white;border-radius:10px;width:345px;height:110px;margin-top:50px;margin-left:20px">
            <div style="margin-left:10px">
              <p>
                <span> <el-button type="danger" icon="el-icon-platform-eleme" @click="dialogVisible = true" circle></el-button></span>
                <span style="margin-left:50px"><el-button type="success" @click="getAddress" icon="el-icon-truck" circle></el-button></span>
                <span style="margin-left:50px"><el-button type="primary" @click="queryHistory" icon="el-icon-star-off" circle></el-button></span>
                <span style="margin-left:50px"><el-button type="warning" @click="logout" icon="el-icon-setting" circle></el-button></span>
              </p>
                <p>
                  <span><el-link type="info">生鲜会员</el-link></span>
                  <span style="margin-left:30px"><el-link type="info">收货地址</el-link></span>
                  <span style="margin-left:30px"><el-link type="info">浏览历史</el-link></span>
                  <span style="margin-left:30px"><el-link type="info">退出登录</el-link></span>
                </p>



                <el-dialog
                  title="会员规则"
                  :visible.sync="dialogVisible"
                  width="80%">
<!--                  :before-close="handleClose">-->
                <span>会员等级：0-5<br><br>
                      购买金额1元 一积分<br><br>
                      0级不是会员<br><br>
                      消费一千元，积分一千，会员一级，打9.8折<br>
                      消费五千元，积分五千，会员二级，打9.5折<br>
                      消费一万元，积分一万，会员三级，打9折<br>
                      消费十万元，积分十万，会员四级，打8.5折<br>
                      消费一百万元，积分一百万，会员五级，打7折 <br></span>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">已了解规则</el-button>
                </span>
              </el-dialog>
            </div>
      </el-col>
</el-row>




</div>
 
</template>

<script>
export default {
  data() {
      return {
        phone:'',
        imageUrl: '',
        user:[],
        userInfo:[],
        dialogVisible: false,
      };
    },
    methods: {
      ToLogin(){
        this.$router.push({ name: "phoneLogin"})
      },
      queryUserInfo(){
        let phone = sessionStorage.getItem("phone");
        this.$axios.get('api/app/getUserInfoByPhone?phone='+phone)
        .then(res=>{
          console.log(111+res.data)
          if(res.data.code == 200){
            this.userInfo= res.data.data;
          }
        })
      },
      queryCreditAndLevels(){
        let phone = sessionStorage.getItem("phone");
        this.$axios.get('api/app/user/queryCreditAndLevel?phone='+phone)
        .then(res=>{
          console.log(res.data)
          if(res.data.code == 200){
            this.user= res.data.data
          }
        })
      },
      findMyOrders(){
        
        this.$router.push({name:'myOrders',params:{name:'all'}});


      },
      receiveMyGoods(){

        this.$router.push({name:'myOrders',params:{name:'goods'}});

      },
      editComment(){

        this.$router.push({name:'myOrders',params:{name:'comment'}});

      },
      queryHistory(){
        this.$router.push('browseHistory')
      },
      getAddress(){
        this.$router.push("address");
      },
      logout(){
        //删除sessionStroge里的数据
        sessionStorage.removeItem("phone");
        sessionStorage.clear()
        this.$router.push({ name: "firstPage"})
        },

      },

created() {
      this.queryCreditAndLevels();
      this.queryUserInfo();
       this.phone = sessionStorage.getItem("phone");
    }

}
</script>

<style>

</style>